<template>
	<view class="hot_box">
		<view class="title">为您推荐</view>
		<view class="hot_list_box">
			<view class="card_box" v-for="(hotItem,hotIndex) in hotData" :key="hotIndex" @tap="goProductDetails(hotItem.id)">
				<image class="goods_img" :src="hotItem.thumPic" mode=""></image>
				<view class="goods_name">{{hotItem.name}}</view>
				<view class="goods_specs">{{hotItem.brandsName}}</view>
				<view class="goods_price">¥{{Number(hotItem.discountPrice)}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { reactive, ref } from 'vue'
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-")
	const props = defineProps({
	    hotData:{
	        type:Object,
	        default:[]
	    },
	})
	const goProductDetails = (goodsId) => {
		uni.navigateTo({
			url:`/pages/shopping/productDetails/index?goodsId=${goodsId}`
		})
	}
</script>

<style lang="scss" scoped>
	.hot_box {
		line-height: 1;
		.title {
			margin-bottom: 32rpx;
			font-size: 40rpx;
			color: #1B2120;
			font-weight: bold;
			text-align: center;
		}

		.hot_list_box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.card_box {
				margin-bottom: 24rpx;
				width: 332rpx;
				border-radius: 24rpx;
				background-color: #fff;
				overflow: hidden;
			}

			.goods_img {
				width: 100%;
				height: 332rpx;
			}

			.goods_name {
				margin-top: 24rpx;
				padding: 0 16rpx;
				font-size: 30rpx;
				color: #1B2120;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 限制显示的行数为2 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.goods_specs {
				margin-top: 10rpx;
				padding: 0 16rpx;
				font-size: 24rpx;
				color: #7C807F;
				
				line-height: 1.4;
			}

			.goods_price {
				padding: 24rpx 16rpx;
				font-size: 30rpx;
				color: #FF6084;
				font-weight: bold;
			}
		}
	}
</style>